<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 操作区域 -->
        <el-row>
          <!-- 2.1 新增按钮点击弹框打开 【添加功能】 -->
          <el-button size="small" type="primary" @click="$refs.addRole.showDialog = true">新增角色</el-button>
        </el-row>
        <br />
        <!-- 表格组件 -->
        <!-- el-table是表格组件，data属性表示数据 -->
        <!-- 4. 渲染数据 【列表功能】 -->
        <el-table border :data="list" style="width: 100%">
          <!-- el-table-column 是列组件 prop表示这列渲染的字段; label表示表头 -->
          <el-table-column type="selection" width="80" />
          <el-table-column type="expand" width="80">
            <template slot-scope="{ row }">
              {{ row }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="分类名称" width="280">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- 1. 修改按钮绑定事件,传入修改ID【修改功能】 -->
              <el-button size="small" type="success" @click="editHandler(scope.row.id)">编辑</el-button>
              <!-- 1. 删除按钮绑定事件,传入删除的ID【删除功能】 -->
              <el-button @click="delHandler(scope.row.id)" size="small" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <!-- 3个变量：每页数量、页码数、总数  -->
        <!-- 2个事件：页码切换事件、每页数量切换事件-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryData.page" :page-sizes="[3, 4, 5, 10]" :page-size="queryData.pagesize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-card>
    </div>
    <!-----------------新增、修改功能------------------------->
    <add-form ref="addRole" @updateList="initData" />
  </div>
</template>
<script>
import {
  getCateListApi,
  getCateInfoApi,
  delCateApi,
} from "@/api/cate";
import addForm from "./components/add-form.vue";
export default {
  name: "Setting",
  components: { addForm },
  data() {
    return {
      list: [], // 表格的数据
      queryData: {
        pageNum: 1,
        pageSize: 5
      },
      total: 0, // 总数
    };
  },
  created() {
    // 3. 调用方法【列表功能】
    this.initData();
  },
  methods: {
    // 2. methods定义方法 【列表功能】
    async initData() {
      let { list, total } = await getCateListApi(this.queryData);
      this.list = list;
      this.total = total;
    },
    // 每页数量切换事件【列表功能】
    handleSizeChange(val) {
      // val是最新的每页数量
      console.log(`每页 ${val} 条`);
      this.queryData.pageSize = val;
      this.initData();
    },
    // 页码切换事件【列表功能】
    handleCurrentChange(val) {
      // val是最新的页码
      console.log(`当前页: ${val}`);
      this.queryData.pageNum = val;
      this.initData();
    },
    // 2. 修改事件函数 【修改功能,数据回显功能】
    async editHandler(id) {
      // 发生请求，获取改行的数据回显给表单并打开弹框
      let res = await getCateInfoApi(id);
      this.$refs.addRole.formData = res;
      this.$refs.addRole.showDialog = true;
    },
    // 2. 删除事件函数 【删除功能】
    async delHandler(id) {
      // 2.1 弹出确认框
      await this.$confirm("确认删除吗");
      // 2.2 发生删除请求
      await delCateApi(id);
      // 2.3 失败处理，成功提示
      this.$message.success("删除成功");
      // 边缘问题，如果不是第一页，且这一页只有一个且删除成功，则页码要-1
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      // 2.4 列表更新
      this.initData();
    },
  },
};
</script>
<style>
</style>
